<template>
    <div>
        <mt-swipe :auto="4000">
            <!-- 在组件中 使用 v-for 循环的话 一定要用 :key -->
            <!-- 将来 谁使用这个轮播图插件 谁为我们提供 lunbotuList-->
            <!-- 此时 lunbotuList 应该【父组件】向【子组件】传值来设置-->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
                <img :src="item.img" alt="" :class="{ 'full':isfull }">
            </mt-swipe-item>
        </mt-swipe>
    </div>

    <!-- 商品轮播图的效果不好 -->
    <!-- 1. 首页中的图片使用的是宽高都是 100% -->
    <!-- 2. 在商品详情页面中 轮播图的图片 如果也使用了 100% 页面就不好看 -->
    <!-- 3. 商品详情页面中的轮播图 期望是高度为 100% 但是宽度自适应 -->
    <!-- 4. 【所以】 首页中的轮播图 和分页中的轮播图 的区别就是 宽度是自适应还是 100% -->
    <!-- 5. 既然这个轮播图只是再宽度有分歧 我们可以定义一个属性 让使用轮播图的调用者 手动指定是否为 100% 的宽度 -->
</template>

<script>
    export default {
        // 用来接收父组件传过来的值！！！！
        props: ["lunbotuList", "isfull"]
    }
</script>

<style lang="scss" scoped>
    .mint-swipe {
        text-align: center;
        height: 200px;

        .is-active {}

        .mint-swiper-item {
            &:nth-child(1) {
                background-color: red;
            }

            &:nth-child(2) {
                background-color: blue;
            }

            &:nth-child(3) {
                background-color: cyan;
            }

            img {
                /* width: 100%; */
                /* height: 100%; */
            }
        }

    }

    .full {
        width: 100%;
        height: 100%;
    }
</style>